<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/qs.js"></script>
</head>

<body>

    <input type="text" id="username">
    <input type="button" value="发送查询字符串" onclick="sendAjax()">
    <script>
        /*   
          请求查询参数：http协议规范，在路径地址以?分割参数和路径，参数以参数名=参数值，多个之间以&进行连接，如：请求路径?username=alice&password=123456
          大多数情况下，查询参数进行传值的是get|delete这类无请求体请求
          form表单中默认使用get请求，参数以查询参数方式进行发送
          页面开发中也可以通过请求路径?参数名=参数值&参数名=参数值,在请求地址后直接进行定义
          
          */

        function transformQueryString(objs) {
          
            let str = "";
            for (var key in objs) {
                str += key + "=" + objs[key] + "&";
            }
            // console.log(str.substring(0,str.length-1));//包含左边界，不包含右边界
            return str.replace(/&$/, "");

        }

        function sendAjax(){
            let username=document.getElementById("username").value;
            let xhr = new XMLHttpRequest();

            let obj={
                username:"cici",
                sex:"男"
            };

            //1.查询参数构成，使用路径拼接方式完成
            // xhr.open("get", `/query?username=${username}&age=20`);
            // xhr.open("get", `/query?username=${obj.username}&sex=${obj.sex}`);

            // 2.查询参数构成：使用工具函数进行转换
            // let str=transformQueryString(obj);
            // xhr.open("get", `/query?${str}`);


            // 3.查询参数构成:使用三方插件提供的工具函数
            // let strs=Qs.stringify(obj);//将对象转换成查询字符串的格式
            // xhr.open("get", `/query?${strs}`);


            // 4.查询参数构成：使用w3c提供的URLSearchParams构造函数创建查询参数
            let usp=new URLSearchParams();
            usp.append("name","tom");//添加新的查询参数
            usp.append("hobby","sing");
            usp.append("num",100);
            // console.log(usp+"");//需要转换成string进行输出
            xhr.open("get", `/query?`+usp);

            xhr.onload=function(){
                console.log(xhr.responseText);
            };
            xhr.send();
        }
    </script>
</body>

</html>